<template>
  <div id="app">
    <mt-header fixed title="半酒薰"></mt-header>
    <!--<ul>-->
    <!--<li><router-link :to="{path:'/'}">home</router-link></li>-->
    <!--<li><router-link :to="{path:'/todoList'}">todoList</router-link></li>-->
    <!--</ul>-->
    <!--<transition name="slide-fade" mode="out-in">-->
    <transition enter-active-class="animated flipInY"
                leave-active-class="animated flipOutY" mode="out-in">
      <router-view/>
    </transition>

    <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/logo.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="todoList">
        <img slot="icon" src="./assets/logo.png">
        示例
      </mt-tab-item>
      <mt-tab-item id="finder">
        <img slot="icon" src="./assets/logo.png">
        发现
      </mt-tab-item>
      <mt-tab-item id="me">
        <img slot="icon" src="./assets/logo.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'App',
    data() {
      return {
        selected: 'home'
      }
    },
    mounted() {
      //console.log(this.$route.name)
      this.selected = this.$route.name
    },
    methods: {},
    computed: {
      ...mapState['count']
    },
    watch: {
      selected: function (val, oldVal) {
        switch(val){
          case 'home':
            this.$router.push({
              //path:'/',
              name: 'home',
              query: {
                name: this.selected
              },
              params: {
                id: '0',
                text: 'hi'
              }
            })
            break;
          case 'todoList':
            this.$router.push({
              //path:'/todoLis',
              name: 'todoList',
              query: {
                id: this.selected
              },
              params: {
                id: '0',
                text: 'hi'
              }
            })
            break;
          case 'finder':
            this.$router.push({
              path: '/finder'
            });
            break;
          case 'me':
            this.$router.push({
              path:'/me'
            });
            break;
          default:
            break
        }
      }
    }
  }
</script>

<style>
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #app {
    margin-top: 50px;
  }
</style>
